<template>
  <van-nav-bar
      fixed
      title="我的商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <van-divider></van-divider>
  <van-divider></van-divider>
  <van-form @submit="onSubmit">
    <van-field
        v-model="name"
        required
        name="name"
        label="商品名称"
        placeholder="商品名称"
        :rules="[{ required: true, message: '请填写商品名称' }]"
    />
    <van-field
        required
        v-model="price"
        type="number"
        name="price"
        label="价格"
        placeholder="价格"
        :rules="[{ required: true, message: '请填写价格' }]"
    />

    <van-field required name="image" label="商品主图" >
      <template #input>
        <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" />
      </template>
    </van-field>

    <van-field
        v-model="introduction"
        rows="3"
        autosize
        label="简介"
        type="textarea"
        placeholder="请输入简介"
    />

    <van-field name="game_images" label="商品内截图" v-model="game_images">
      <template #input>
        <van-uploader :max-count="3" v-model="game_images_list" :after-read="afterReadGameImage"/>
      </template>
    </van-field>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script>
import {publish} from "@/api/goods";
import axios from 'axios'
import {Toast} from "vant";
export default {
  name: "publish",
  data(){
    return {
      name:"",
      price:0,
      image:"",
      introduction:"",
      game_images:"",
      fileList:[],
      game_images_list:[]
    }
  },
  methods:{
    onClickLeft() {
      history.back()
    },
    pageClick(){

    },
    onSubmit(values){
      console.log(values)
      console.log(this.fileList[0])
      let goods = {
        name:this.name,
        image:this.image,
        price:this.price,
        introduction:this.introduction,
        game_images:this.game_images,
      }
      publish(goods).then((res)=>{
        if(res.code==200){
          Toast.success("发布成功");
          this.$router.push('/mygoods')
        }
      })
    },
    afterRead(file){
      this.uploadImage(file).then((res)=>{
       this.image = res.data
      })
    },
    afterReadGameImage(file){
      this.uploadImage(file).then((res)=>{
        this.game_images += res.data+","
      })
    },
    uploadImage(file){
      let params = new FormData()
      params.append('image', file.file)
      let token = window.sessionStorage.getItem("token")
      let config = {
        headers: { //添加请求头
          'Content-Type': 'multipart/form-data',
          'Authorization':token
        }
      }
      return new Promise((resolve, reject) => {
        //把 uploadUrl 换成自己的 上传路径
        axios.post('/api/images', params, config).then(res => {
          if (res && res.data ) {				//如果为真 resolve出去
            resolve(res.data)
          } else {
            //否则 Toast 提示
            Toast.fail(res.data && (res.data.msg))
            reject(res.data)
          }
        }).catch(err => {
          Toast.fail('系统异常')
          reject(err)
        });
      })
    }
  }
}
</script>

<style >
.goods-card {
  margin: 0;
  background-color: #ffffff;
}

.delete-button {
  height: 100%;
}
</style>
